<nz-back-top></nz-back-top>
<ngx-image-gallery #gallery [images]="images" [conf]="conf"> </ngx-image-gallery>
<div nz-row>
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li (click)="sort(1)" nz-menu-item>按年份升序</li>
        <li (click)="sort(2)" nz-menu-item>按年份降序</li>
        <li (click)="sort(3)" nz-menu-item>按SKU号排序</li>
        <li (click)="sort(4)" nz-menu-item>按款号排序</li>
        <li (click)="sort(5)" nz-menu-item>按款式排序</li>
      </ul>
    </nz-dropdown-menu>

    <app-product-search [str]="q.keyword" (search)="toSearch($event)"></app-product-search>
    <nz-badge [nzCount]="sumSelect" [nzOffset]="[-10, 0]">
      <button (click)="open()" nz-button nzType="link">筛选 <i class="iconfont icon-shaixuan"></i></button>
    </nz-badge>
    <button nz-dropdown nz-button nzType="link" [nzDropdownMenu]="menu">
      排序
      <i nz-icon nzType="down"></i>
    </button>
    <nz-switch *ngIf="mode === 'grid'" (ngModelChange)="switchFold($event)" nz-tooltip nzTooltipTitle='按款号展开/折叠产品'
      [ngModel]="expandMode" nzCheckedChildren="展开" nzUnCheckedChildren="折叠">
    </nz-switch>

    <button style="float: right" *ngIf="mode==='grid' && expandMode===true" (click)="toList()" nz-button
      nzType="default" nzShape="circle" nz-tooltip nzTooltipTitle='列表视图'><i nz-icon nzType="unordered-list"
        nzTheme="outline"></i></button>

    <div style="float: right" class=" justify-content-between align-items-center mb-sm mt-sm"
      [hidden]="mode === 'grid'">
      <div class="d-flex align-items-center">
      </div>
      <div>
        <button (click)="toGrid()" nz-button nzType="default" nzShape="circle" nz-tooltip nzTooltipTitle='网格视图'><i
            nz-icon nzType="appstore" nzTheme="outline"></i></button>
        <button (click)="st.reset()" nz-button nzType="default" nzShape="circle" nz-tooltip nzTooltipTitle='刷新'><i
            nz-icon nzType="sync" nzTheme="outline"></i></button>

        <custom-column [st]="st" (ok)="st.resetColumns()" class="ml-sm"></custom-column>
      </div>
    </div>


  </div>
</div>
<nz-spin [nzSpinning]="loading">
  <div nz-row>
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
      <div [hidden]="mode!=='list'" style="margin-top: 10px;">
        <div style="background: #fff; padding: 5px;">
          <!-- 表格 -->
          <st #st [pi]='q.pi' [ps]='q.ps' [data]="url" [page]="{showSize: true, toTop: false}" [size]="'small'"
            [columns]="columns" [req]="{reName: { pi: 'current', ps: 'size' }, process: preHandle}"
            [res]="{reName: { total: 'data.total', list: 'data.records'}, process: resPreHandle}">
            <ng-template st-row="img" let-i let-index="index">
              <span *ngIf="!i.pic" style="color: lightgrey; font-size: 12px;">无图片</span>
              <a (click)="showGallery(index)"><img *ngIf="i.pic" [src]="host + '/cf/admin/sysfile/f/' + i.pic"
                  width="32px" style=" max-height: 32px;" /></a>
            </ng-template>
          </st>
        </div>
      </div>
      <div *ngIf="mode==='grid'" class="place-rstbox">
        <div style="min-height: 200px;">
          <!--网格-->
          <nz-empty style="margin-top: 50px;" *ngIf="data.length === 0"></nz-empty>
          <product-cell (goDetail)="goView(p, $event)" (showGallery)="showGallery2(p, idx, $event)"
            *ngFor="let p of data;let idx = index" [p]="p" [mode]="expandMode">
          </product-cell>
        </div>
      </div>
    </div>
  </div>
  <div id="fetchMoreRst" *ngIf="mode === 'grid'" style="margin-top: 20px; padding-bottom: 20px;">
    <nz-pagination [nzPageIndex]="q.pi" [nzPageSize]="q.ps" (nzPageIndexChange)="toGetData($event)" [nzTotal]="total">
    </nz-pagination>
  </div>
</nz-spin>

<nz-drawer [nzWidth]="350" [nzMaskClosable]="false" [nzClosable]="false" [nzVisible]="visible" [nzPlacement]="placement"
  nzTitle="筛选" (nzOnClose)="close()">
  <div class="mb-md">
    <p class="p_label">品牌</p>
    <nz-tag *ngFor="let tag of brands" nzMode="checkable" [nzChecked]="s1.indexOf(tag) > -1"
      (nzCheckedChange)="brandChange($event, tag)">
      {{ tag }}
    </nz-tag>
  </div>
  <!-- <div class="mb-md">
    <p class="p_label">分类</p>
    <nz-tag *ngFor="let tag of brandTypes" nzMode="checkable" [nzChecked]="s2.indexOf(tag) > -1"
      (nzCheckedChange)="brandTypeChange($event, tag)">
      {{ tag }}
    </nz-tag>
  </div> -->
  <div class="mb-md">
    <p class="p_label">年份</p>
    <nz-tag *ngFor="let tag of years" nzMode="checkable" [nzChecked]="s3.indexOf(tag) > -1"
      (nzCheckedChange)="yearChange($event, tag)">
      {{ tag }}
    </nz-tag>
  </div>
  <div class="mb-md">
    <p class="p_label">款式</p>
    <nz-tag *ngFor="let tag of useGroups" nzMode="checkable" [nzChecked]="s4.indexOf(tag) > -1"
      (nzCheckedChange)="useGroupChange($event, tag)">
      {{ tag }}
    </nz-tag>
  </div>
  <div class="mb-md">
    <p class="p_label">销售渠道</p>
    <nz-tag *ngFor="let tag of sales" nzMode="checkable" [nzChecked]="s5.indexOf(tag) > -1"
      (nzCheckedChange)="salesChange($event, tag)">
      {{ tag }}
    </nz-tag>
  </div>
  <div class="footer">
    <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>取消</span></button>
    <button type="button" (click)="sureSelect()" class="ant-btn ant-btn-primary"><span>确定</span></button>
  </div>
</nz-drawer>

<float-btns *ngIf="prodinfo_export_btn" class="hidden-xs hidden-sm hidden-md" [title]="'你需要做什么？'" [btns]="btns"
  (itemClick)="downloadFile($event)">
</float-btns>
